<template>
  <el-breadcrumb
    separator="/"
    class="mb-1"
    :class="{ 'mx-1': useLocale.isMob }"
    style="vertical-align: bottom"
  >
    <el-breadcrumb-item>
      <div class="flex align-center">
        <el-icon :size="18"> <Monitor /> </el-icon
        ><span class="pl">广告推广</span>
      </div>
    </el-breadcrumb-item>
    <el-breadcrumb-item>媒体报表</el-breadcrumb-item>
  </el-breadcrumb>
     <el-row :gutter="15">
    <el-col :xs="8" :sm="8" :md="8" class="mb-15 mt-1">
      <div class="mob-card primarybg">
        <el-statistic class="py-1" title="曝光总数" :value="rel.exposure_total" />
      </div>
    </el-col>
    <el-col :xs="8" :sm="8" :md="8" class="mb-15 mt-1">
      <div class="mob-card dangerbg">
         <el-statistic class="pt-1" title="点击总数" :value="rel.click_total" />
      </div>
    </el-col>
     <el-col :xs="8" :sm="8" :md="8" class="mb-15 mt-1">
      <div class="mob-card bluebg">
         <el-statistic class="py-1" title="消耗总额" :value="rel.consume_total" />
      </div>
    </el-col>
  </el-row>
   <div v-if="useLocale.isMob">
    
    <div class="mx-15 my-15 flex justify-end">
      <el-button
        :icon="Search"
        size="small"
        circle
        @click="
          () => {
            rel.mobFilter = true;
          }
        "
      />
    </div>

    <div class="mob-list mt-1">
    
      <el-scrollbar ref="scrollbarRef" class="mob-scroll">
        <div
          class="mob-list-item text-content-color font"
          v-for="(item, index) in tableData"
        >
           <div class="flex justify-between border-bottom py-15">
            <div class="text-ellipsis font-mder text-main-color" style="width: 70%">
              {{ item.media_name }}
            </div>
            <div>
              {{ item.date }}
            </div>
          </div>

          <div class="flex justify-between border-bottom py-15">
            <span>曝光次数</span>
              <span>{{ item.exposure_num }}</span>         
          </div>
          <div class="flex justify-between border-bottom py-15">
            <span>点击次数</span>
              <span>{{ item.click_num }}</span>  
          </div>
          <div class="flex justify-between py-15">
            <span>消耗金额({{rel.currency}})</span>
            <span>{{ item.consume_amount }}</span>
          </div>
          <div class="flex justify-between py-15">
            <span>曝光效益</span>
            <span>{{ item.exposure_rate }}</span>
          </div>
          <div class="flex justify-between py-15">
            <span>互动效益</span>
            <span>{{ item.click_rate }}</span>
          </div>
        </div>
      </el-scrollbar>
    </div>

    <div v-if="rel.total > params.page_size" class="my-1 flex justify-center">
      <el-pagination
        v-model:current-page="params.current_page"
        v-model:page-size="params.page_size"
        :pager-count="5"
        :small="false"
        :disabled="false"
        :background="true"
        layout="prev, pager, next"
        :total="rel.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>

  <el-card v-else class="box-card" shadow="hover">
    <template #header>
      <el-space wrap :size="10" class="mt">
        <el-select
          v-model="params.date_type"
          placeholder="类型"
          style="width: 100px"
          @change="typeChange"
        >
          <el-option
            v-for="item in dateType"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
        <el-date-picker
          v-if="params.date_type != 'year'"
          v-model="rel.date"
          :type="rel.typePicker"
          range-separator="To"
          start-placeholder="開始日期"
          end-placeholder="結束日期"
          :editable="false"
          :value-format="rel.valueFormat"
          :disabled-date="disabledDateFun"
        />
         <el-input
          v-model="params.media_name"
          style="width: 150px"
          placeholder="媒体名称"
        />
        <el-button :icon="Search" plain @click="search">查詢</el-button>
      </el-space>
    </template>
    
    <el-table :data="tableData" style="width: 100%">
    <el-table-column fixed prop="media_name" label="媒体名称" />
      <el-table-column fixed prop="date" label="日期" />
      <el-table-column prop="exposure_num"  label="曝光次数" />
       <el-table-column prop="click_num" label="点击次数" />

      <el-table-column prop="consume_amount" :label="'消耗金额'+rel.currency" />

      <el-table-column label="曝光效益">
        <template #default="scope">
          <span>{{ scope.row.exposure_rate }}%</span>
        </template>
      </el-table-column>
      <el-table-column label="互动效益">
        <template #default="scope">
          <span>{{ scope.row.click_rate }}%</span>
        </template>
      </el-table-column>
    </el-table>
    <div v-if="rel.total > params.page_size" class="mt-2 flex justify-center">
      <el-pagination
        v-model:current-page="params.current_page"
        v-model:page-size="params.page_size"
        :page-sizes="[20, 40, 60]"
        :small="false"
        :disabled="false"
        :background="true"
        layout="total, sizes, prev, pager, nex"
        :pager-count="9"
        :total="rel.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </el-card>
  <el-drawer :z-index="999" v-model="rel.mobFilter" size="80%">
    <template #header>
      <h4>{{ $t("common.filter") }}</h4>
    </template>
    <template #default>
      <el-space direction="vertical" fill style="width: 100%">
      <div class="mb-1">
          <div class="font-sm text-tips-color mb">媒体名称</div>
          <el-input v-model="params.media_name" />
        </div>
        <div class="mb-1">
          <div class="font-sm text-tips-color mb">
           日期类型
          </div>
          <el-select
            v-model="params.date_type"
            placeholder="类型"
            style="width: 100%"
            @change="typeChange"
          >
            <el-option
              v-for="item in dateType"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </div>

        <div class="mb-1" v-if="params.date_type != 'year'">
          <div class="font-sm text-tips-color mb">
           日期范围
          </div>
          <el-input
            v-model="rel.dateDesc"
            style="width: 100%"
            placeholder="请选择日期范围"
            :prefix-icon="Calendar"
            @click="mobOpenDate"
          />
        </div>
      </el-space>
    </template>
    <template #footer>
      <div style="flex: auto">
        <el-button @click="mobClearFilter">{{ $t("common.clear") }}</el-button>
        <el-button type="primary" @click="search">{{
          $t("common.query")
        }}</el-button>
      </div>
    </template>
  </el-drawer>
  <nut-calendar
    v-model:visible="rel.visible"
    type="range"
    :default-value="rel.date"
    :start-date="rel.start"
    :end-date="rel.end"
    @choose="mobChooseDate"
  >
  </nut-calendar>
</template>
<script lang="ts" setup>
import { nextTick, ref, onMounted, reactive, watch, computed } from "vue";
import { Search, Monitor,Calendar } from "@element-plus/icons-vue";
import { $mediaReport } from "@api/promotion";
import { dayjs } from "element-plus";
import { useLocaleStore } from "@/store/locales";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const langkey = computed(() => useLocale.locale);
const useLocale = useLocaleStore();
let defaultEnd = dayjs().subtract(1, "day");
const params = ref({
  current_page: 1,
  page_size: 10,
  date_type: "date",
  start_time: "",
  end_time: "",
  media_name:"",
});
const scrollbarRef = ref();
const rel = reactive({
  typePicker: "daterange",
  valueFormat: "YYYY-MM-DD",
  date: [],
  currency:useLocale.dictionary.currency,//币种
  total:0,
  exposure_total:0,
  click_total:0,
  consume_total:0,
   mobFilter: false,
  visible: false,
  dateDesc: "", //手机日期描述
  start: "2024-01-01",
  end: dayjs(defaultEnd).format("YYYY-MM-DD"),
});
const tableData = ref([]);
const dateType = ref([
  { id: "date", name: "日" },
  { id: "month", name: "月" },
  { id: "year", name: "年" },
]);
onMounted(() => {
  getData();
});
const getData = async () => {
  if (rel.date.length != 0) {
    params.value.start_time = rel.date[0];
    params.value.end_time = rel.date[1];
  }else{
    params.value.start_time = "";
    params.value.end_time = "";
  }
  console.log(params);
  let res = await $mediaReport(params.value);
  if (res.code == 0) {
    tableData.value = res.data.table;
    rel.total = res.data.total;
    rel.exposure_total = res.data.exposure_total;
    rel.click_total = res.data.click_total;
    rel.consume_total = res.data.consume_total;
      if (useLocale.isMob) {
      nextTick(() => {
        scrollbarRef.value.setScrollTop(0);
      });
    }
  }
};
const handleSizeChange = (val: number) => {
  params.value.page_size = val;
  getData();
};
const handleCurrentChange = (val: number) => {
  params.value.current_page = val;
  getData();
};
const search = () => {
  getData();
};
const handleClick = (tab: TabsPaneContext, event: Event) => {
  getData();
};
const typeChange = (val) => {
  if (val == "date") {
    rel.typePicker = "daterange";
    rel.valueFormat="YYYY-MM-DD"

  } else if(val=='month'){
    rel.typePicker  = "monthrange";
    rel.valueFormat="YYYY-MM"
  }
  rel.date = [];
};
const disabledDateFun = (date) => {
  let now = dayjs().subtract(1, "day");
  if (date < now) return false;
  return true;
};


const mobOpenDate = () => {
  rel.visible = true;
};
const mobCloseDate = () => {
  rel.visible = false;
};
const mobChooseDate = (param) => {
  console.log(param);
  if (params.value.date_type === "date") {
    rel.date = [...[param[0][3], param[1][3]]];
  } else {
    let s = `${param[0][0]}-${param[0][1]}`;
    let e = `${param[1][0]}-${param[1][1]}`;
    rel.date = [s, e];
  }

  rel.dateDesc = `${rel.date[0]} To ${rel.date[1]}`;
};
const mobClearFilter = () => {
  params.value.date_type = "date";
  params.value.current_page = 1;
  params.value.page_size = 10;
  params.value.media_name="";
  rel.date=[];
  rel.dateDesc = "";
  getData();
};
watch(langkey, (newVal, oldVal) => {
  getData();
});
</script>

<style lang="scss" scoped>
.mob-scroll {
  height: calc(100vh - 290px);
}
.mob-card {
  height: 100%;
  text-align: center;
  border-radius: 10px;
  background: #fff;
  width: 100%;
  display:flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  
  &:hover {
    box-shadow: var(--el-box-shadow-light);
  }
}
.dangerbg {
    background-color: var(--el-color-error-light-9);
    border: 1px solid var(--el-color-error-light-8);
  }
  .primarybg {
    background-color: var(--el-color-primary-light-9);
    border: 1px solid var(--el-color-primary-light-8);
  }
  .bluebg {
    background-color: var(--el-color-blue-light-9);
    border: 1px solid var(--el-color-blue-light-8);
  }

</style>
